<template>
  <div class="main" style="padding: 20px">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <!-- 复选框 -->
      <a-form-item
        class="chekboxs"
        label="是否办结"
        v-if="type == 3"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :required="false"
      >
        <a-checkbox-group
          v-decorator="['checkbox-group', { rules: [{ required: false, message: '请选择操作方式' }] }]"
          style="width: 100%"
        >
          <a-checkbox> 办结 </a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <!--打分框-->
      <a-form-item label="居民积分" v-if="type == 3" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
          v-decorator="['score', { rules: [{ required: true, message: '请选择积分' }] }]"
          :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          placeholder="请选择积分"
          @change="scores"
        >
          <a-select-option v-for="item in score" :key="item.id" :value="item.id">
            {{ item.number }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- 禁用输入框 -->
      <a-form-item v-if="type == 2" label="部门" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input class="disabled" :disabled="true" v-model:value="address.unit_name" />
      </a-form-item>
      <!-- 下拉框项 -->
      <a-form-item label="人员" v-if="type == 1" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-select
          v-decorator="[
            'select-multiple',
            {
              rules: [{ required: true, type: 'array', message: '请选择人员' }],
            },
          ]"
          :getPopupContainer="(triggerNode) => triggerNode.parentNode"
          :filter-option="false"
          show-search
          showArrow
          mode="multiple"
          placeholder="请选择人员"
          @change="selects"
          @search="handleSearch"
        >
          <a-select-option v-for="item in userList" :key="item.id" :value="item.id">
            {{ item.name }}({{ item.type_name }})
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 日期选择项 -->
      <a-form-item v-if="type == 1" label="处理时限" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-date-picker
          v-model:value="form.deadline"
          class="deadLine"
          show-time
          style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>

      <!-- 文本域项 -->
      <a-form-item class="textField" label="意见/建议" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-textarea
          placeholder="请输入内容"
          :auto-size="{ minRows: 4, maxRows: 30 }"
          class="input-size"
          v-model:value="form.content"
        />
      </a-form-item>
      <!-- 文件上传项 -->
      <a-form-item class="textFields" label="附件" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-upload class="uploadFile" @change="upChange" name="file" :action="actionUrl">
          <a-button>
            <a-icon type="upload" />
            上传附件
          </a-button>
        </a-upload>
      </a-form-item>
      <!-- 按钮项 -->
      <!--      <a-form-item class="btn">
        <spin-button type="primary" html-type="submit" @click="handleSubmit"> 确定</spin-button>
        <spin-button html-type="submit" @click="cancel"> 取消</spin-button>
      </a-form-item>-->
    </a-form>
  </div>
</template>

<script>
import SpinButton from '@gis/lib/components/Button/SpinButton.vue';
import { getAssignPeoplesList } from '@gis/lib/api';
import env from '@gis/lib/env.js';
import { handleFormRes } from '@gis/lib/utils/resolver.js';
import { eventHandle } from '@gis/lib/api';
const agentUrl = env.get('VUE_APP_API_AGENT_URL');
const uploadUrl = '/fileservice/v1/fileYd';

export default {
  name: 'event-handle',
  components: { SpinButton },
  props: {
    type: { type: [String, Number], default: '' },
    event_id: { type: [String, Number], default: '' },
  },
  data() {
    return {
      actionUrl: env.DEV ? agentUrl + uploadUrl : uploadUrl,
      form: {
        action: 6,
        attachment_list: [],
        content: '',
        deadline: '',
        event_id: this.event_id,
        file: '',
        receiver_id: '',
        select: '',
      },
      scoresNumber: 0,
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      formCopy: {},
      defaultFileList: {},
      //传文件返回数据
      totalUserList: [],
      userList: [],
      // 暂存上传文件返回数据
      fileList: [],
      address: {},
      //打分框的分数
      score: [
        { number: '0分', id: '0' },
        { number: '1分', id: '1' },
        { number: '2分', id: '2' },
        { number: '3分', id: '3' },
      ],
    };
  },
  methods: {
    scores(value) {
      this.scoresNumber = value;
    },
    cancel() {
      this.$emit('refresh');
      this.$emit('close');
    },
    upChange(res) {
      if (res.file.status == 'done') {
        this.fileList = res.fileList;
      } else if (res.file.status == 'removed') {
        this.fileList = res.fileList;
      }
    },
    selects(value) {
      this.form.receiver_id = `${value}`;
      this.form.select = `${value}`;
    },
    handleSearch(val) {
      this.userList = this.totalUserList.filter((item) => {
        return item.name.indexOf(val) >= 0;
      });
    },
    async onOk() {
      //处理上传的文件的参数符合接口
      this.form.attachment_list = [];
      for (let i = 0; i < this.fileList.length; i++) {
        let response = this.fileList[i].response.data;
        let datas = {
          attachment_name: '',
          attachment_type: 0,
          attachment_url: '',
        };
        datas.attachment_name = response.name;
        datas.attachment_url = response.url;
        // 判断类型
        if (response.suffix == 'jpg' || response.suffix == 'png' || response.suffix == 'jpeg') {
          datas.attachment_type = 1;
        } else if (response.suffix == 'mp3') {
          datas.attachment_type = 2;
        } else if (response.suffix == 'mp4') {
          datas.attachment_type = 3;
        } else if (response.suffix == 'txt') {
          datas.attachment_type = 4;
        }
        this.form.attachment_list.push(datas);
      }
      const actionParams = {
        1: '6', //指派
        2: '4', //上报
        3: '12', //办结
        4: '13', //无效
      };
      let params = Object.assign({}, this.form, {
        action: actionParams[this.type],
      });
      if (this.type == 3) {
        params['score'] = this.scoresNumber;
      }
      return await handleFormRes(eventHandle, params, {
        onOk: (res) => {
          this.$emit('handleSuccess');
        },
      });
    },

    // onChange(date) {
    //   this.form.deadline = date.format('YYYY-MM-DD HH:mm:ss');
    // },
    async getUserList() {
      const data = this.handleCommonResult(await getAssignPeoplesList({ type: 2 }));
      this.totalUserList = data || [];
      this.userList = this.totalUserList.slice(0);
    },
    async getAddress() {
      const data = this.handleCommonResult(await getAssignPeoplesList({ type: 3 }));
      this.address = data;
    },
  },
  created() {
    if (this.type == 1) {
      this.getUserList();
    }
    if (this.type == 2) {
      this.getAddress();
    }
  },
};
</script>

<style scoped lang="less">
/*.main {
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  /deep/.ant-select-selection--single {
    background: rgba(11, 26, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  /deep/.ant-select {
    color: white;
  }
  /deep/.ant-select-dropdown-menu {
    background: rgba(11, 26, 38, 0.98) top left repeat-y;
  }
  /deep/.ant-select-selection--single {
    //width: 74px;
  }
  /deep/.ant-select-dropdown-menu-item {
    color: #fafafa;
  }
  /deep/.ant-upload-list-item:hover .ant-upload-list-item-info {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(66, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  }
  /deep/.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
  /deep/.ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected:not(.ant-select-dropdown-menu-item-disabled) {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(66, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  }
  /deep/.ant-select-dropdown-menu-item-active {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(66, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
  }
  /deep/.ant-calendar-picker-icon {
    color: white;
  }
  /deep/.ant-calendar-picker-clear {
    border-radius: 50%;
  }
  /deep/ .chekboxs {
    display: flex;
    justify-content: flex-start !important;
  }

  /deep/ .ant-checkbox-wrapper span {
    color: white;
  }

  /deep/ .ant-checkbox-wrapper span:nth-of-type(1) {
    color: white;
  }
  /deep/ .disabled {
    background: rgba(11, 26, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  /deep/ .ant-calendar-picker-input {
    height: 36px;
  }

  /deep/ .ant-select-search__field {
    color: white;
  }

  /deep/ .ant-form-item-label > label {
    color: white;
  }

  /deep/ .ant-select-selection--multiple {
    width: 372px;
    height: 36px;
    background: rgba(11, 26, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  /deep/ .ant-upload-list-item-name {
    margin: 0 9px 0 0;
    color: white;
  }

  /deep/ .ant-upload-list-item-info {
    svg {
      path {
        background-color: rgba(0, 0, 0, 0.85);
      }
    }
  }

  /deep/ .ant-upload-list-item-card-actions {
    position: absolute;
    right: -5px;
    top: 0px;
  }

  /deep/ .anticon-delete {
    svg {
      color: rgba(255, 255, 255, 0.85);
    }
  }
  /deep/.anticon-paper-clip {
    color: rgba(255, 255, 255, 0.85);
  }
  /deep/ .ant-input {
    width: 372px;
    height: 36px;
    padding: 6px 10px;
    color: white;
  }

  /deep/ .input-size {
    height: 100px;
  }

  .texts {
    height: 88px;
    padding: 6px 10px;
    color: black;
    float: left;
    border: 0;
    outline: none;
  }

  .btn {
    display: flex;
    flex-direction: row-reverse;

    /deep/ .ant-form-item-control-wrapper {
      float: left;
    }
  }
}*/
</style>
